<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="upload-model-dialog" v-if="visible">
                <div class="upload-model-dialog__mask" @click="onClose"></div>
                <div class="upload-model-dialog__content">
                    <div class="top">
                        <div class="title">上传模型</div>

                        <div class="close" @click="onClose">
                            <img
                                :src="`${_oss_}images/icon-close-default.png`"
                            />
                        </div>
                    </div>

                    <div class="form">
                        <div class="form-item">
                            <div class="form-label">名称：</div>
                            <div class="form-value">
                                <input
                                    v-model="form.name"
                                    class="text-input"
                                    type="text"
                                    placeholder="请输入名称"
                                />
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="form-label">添加缩略图：</div>
                            <div class="form-value">
                                <div class="upload-group">
                                    <div
                                        class="name"
                                        :class="{ placeholder: !form.cover }"
                                    >
                                        {{
                                            form.cover
                                                ? form.cover.name
                                                : "请选择缩略图"
                                        }}
                                    </div>
                                    <input
                                        id="cover"
                                        hidden
                                        type="file"
                                        @change="onChange('cover', $event)"
                                        accept="image/*"
                                    />
                                    <label class="btn" for="cover">添加</label>
                                </div>
                            </div>
                        </div>
                        <div class="form-item">
                            <div class="form-label">添加模型文件(Zip):</div>
                            <div class="form-value">
                                <div class="upload-group">
                                    <div
                                        class="name"
                                        :class="{ placeholder: !form.model }"
                                    >
                                        {{
                                            form.model
                                                ? form.model.name
                                                : "请选择模型文件"
                                        }}
                                    </div>
                                    <input
                                        id="model"
                                        hidden
                                        type="file"
                                        @change="onChange('model', $event)"
                                        accept=".zip,.rar,.7z"
                                    />
                                    <label class="btn" for="model">添加</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="notice">
                        <img
                            class="icon-notice"
                            :src="`${_oss_}images/admin/icon-notice.png`"
                        />
                        <div class="tips">
                            上传说明：模型文件限制30m。上传的模型文件是.FBX格式，
                            同时需要将.fbx文件和贴图文件打成打一个.zip压缩包。
                        </div>
                    </div>

                    <div class="upload-btn" @click="onUpload">
                        <el-icon
                            class="is-loading"
                            color="#ffffff"
                            v-if="isUploading"
                        >
                            <Loading />
                        </el-icon>
                        {{ isUploading ? "上传中" : "上传" }}
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { Loading } from "@element-plus/icons-vue";
import { UploadModel } from "~/api";

const visible = ref(false);
const emits = defineEmits(["success"]);
const form = reactive({
    name: "",
    model: null,
    cover: null,
});
const isUploading = ref(false);

const onClose = () => {
    if (!isUploading.value) {
        visible.value = false;
        form.name = "";
        form.model = null;
        form.cover = null;
    }
};

const onChange = (type, e) => {
    let file = e.target.files[0];
    if (type === "model" && file.size > 30 * 1024 * 1024) {
        Message().warning("压缩包大小不能超过30MB！");
        e.srcElement.value = "";
        return false;
    }
    form[type] = file;
};

const onUpload = async () => {
    if (isUploading.value) return false;
    if (form.name.trim().length == 0) {
        Message().warning("请输入名称！");
    } else if (!form.cover) {
        Message().warning("请选择缩略图！");
    } else if (!form.model) {
        Message().warning("请选择模型文件！");
    } else {
        const formData = new FormData();
        formData.append("name", form.name);
        formData.append("file", form.model);
        formData.append("icon", form.cover);
        formData.append("type", 0);
        isUploading.value = true;
        const res = await UploadModel(formData);
        isUploading.value = false;
        if (res.code == 200) {
            Message().success("上传成功");
            onClose();
            emits("success");
        } else {
            Message().error("上传失败");
        }
    }
};

defineExpose({
    show() {
        visible.value = true;
    },
});
</script>
<style lang="scss" scoped>
.upload-model-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 450px;
        height: 400px;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        background: #fff;
        padding: 0 20px;

        .top {
            position: relative;
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-bottom: 1px solid #f1f1f1;

            .title {
                font-weight: bold;
                font-size: 18px;
                color: #333333;
            }

            .close {
                width: 14px;
                height: 14px;
                position: absolute;
                top: 50%;
                right: 0;
                cursor: pointer;
                transform: translateY(-50%);

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .form {
            padding-top: 27px;

            &-item {
                display: flex;
                align-items: center;
                margin-bottom: 12px;
            }

            &-label {
                width: 140px;
                font-size: 14px;
                color: #666;
                text-align: right;
                margin-right: 15px;
            }

            .text-input {
                width: 251px;
                height: 36px;
                background: rgba(241, 241, 241, 0.5);
                border-radius: 4px;
                outline: none;
                border: none;
                font-size: 14px;
                color: #333;
                padding: 0 10px;

                &::placeholder {
                    color: #999999;
                }
            }

            .upload-group {
                display: flex;
                align-items: center;
                justify-content: space-between;
                width: 251px;
                height: 36px;
                background: rgba(241, 241, 241, 0.5);
                border-radius: 4px;
                font-size: 14px;
                color: #333;
                padding: 0 4px 0 10px;

                .btn {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 46px;
                    height: 28px;
                    background: #5085fb;
                    border-radius: 4px;
                    color: #fff;
                    cursor: pointer;
                }

                .placeholder {
                    color: #999999;
                }
            }
        }

        .notice {
            width: 420px;
            height: 54px;
            background: rgb(255, 50, 50, 0.1);
            border-radius: 4px;
            margin: 24px auto 0;
            font-size: 14px;
            color: #ff3232;
            display: flex;
            padding: 8px;
            line-height: 20px;

            .icon-notice {
                width: 14px;
                height: 14px;
                margin-right: 4px;
                margin-top: 3px;
            }
        }

        .upload-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 120px;
            height: 40px;
            background: #5085fb;
            border-radius: 8px;
            font-weight: bold;
            font-size: 16px;
            color: #fff;
            margin: 45px auto 0;
            cursor: pointer;

            :deep(.el-icon) {
                margin-right: 5px;
                font-size: 18px;
            }
        }
    }

    &__close {
        position: absolute;
        top: 0;
        right: -40px;
        cursor: pointer;
        z-index: 99;

        img {
            width: 24px;
            height: 24px;
        }
    }
}
</style>
